<template>
  <el-card class="app-container">
    <c-u-r-d-table :option="option" ref="table"/>
    <el-dialog
      :visible.sync="importDialogShowed"
      title="批量导入"
      width="700px"
      :close-on-click-modal="false"
      center
      top="30vh"
    >
      <el-alert type="warning" :closable="false" show-icon style="line-height: 1.6">
        单次最多可导入的数据数量最多10000条。若数量较多，可拆分文件后上传
      </el-alert>
      <div slot="footer" class="flex">
        <div class="flex-con" style="text-align: left;font-size: 14px">
          <a href="/template/商品换货登记导入模板.xlsx" target="_blank">
            下载导入模板
          </a>
        </div>
        <file-uploader
          title="上传导入文件"
          icon=""
          size="mini"
          type="primary"
          action="/api/pdt/product-offline-register/import"
          @success="handleImportSuccess"
        />
        <div class="flex-con"></div>
      </div>
    </el-dialog>

    <dialog-columns-form
      v-model="formData"
      width="600px"
      title="批量分配"
      :visible.sync="distributionDialogShowed"
      :columns="distributionColumns"
      @submit="handleSubmitDistribution"
    />
  </el-card>
</template>

<script>

import ColumnType from '@/framework/constant/ColumnType'
import { productOfflineRegisterApi } from '@/feature/pdt/infra/api/productOfflineRegisterApi'
import CURDTable from '@/framework/components/table/CURDTable'
import { storeApi } from '@/feature/mct/infra/api/storeApi'
import OfflineTypeEnum from '@/feature/pdt/infra/constants/OfflineTypeEnum'
import FileUploader from '@/framework/components/FileUploader'
import YesNoEnum from '@/infra/constant/YesNoEnum'
import { adminApi } from '@/feature/mgr/infra/api/adminApi'
import DateType from '@/framework/constant/DateType'
import DialogColumnsForm from '@/framework/components/form/DialogColumnsForm'
import AdminTypeEnum from '@/feature/mgr/infra/constants/AdminTypeEnum'

export default {
  components: { DialogColumnsForm, FileUploader, CURDTable },
  data() {
    return {
      // countInfo: {
      //   notExchangedCount: 0,
      //   notHandledCount: 0
      // },
      importDialogShowed: false,
      formData: {
        handlerIdList: []
      },
      distributionColumns: [
        {
          label: '换货处理人',
          type: ColumnType.MUL_SELECT,
          searchable: true,
          span: 24,
          required: true,
          options: adminApi.listAllOfType(AdminTypeEnum.SELLER_AFTER.id),
          prop: 'handlerIdList'
        }
      ],
      distributionDialogShowed: false,
      option: {
        tab: {
          options: [{
            value: 0,
            text: '全部'
          }, {
            value: 1,
            num: 0,
            text: '待标记商品换货'
          }, {
            num: 0,
            value: 2,
            text: '待标记换货跟进'
          }],
          defaultValue: 0,
          onChange: (v) => {
            this.$refs.table.setFilterParam('handleFlag', null).setFilterParam('exchangeFollowFlag', null)
            if (v === 1) {
              this.$refs.table.setFilterParam('handleFlag', 0)
            } else if (v === 2) {
              this.$refs.table.setFilterParam('exchangeFollowFlag', 0)
            }
            this.$refs.table.reloadTable()
          }
        },
        requestApi: productOfflineRegisterApi,
        requestApiNames: {
          list: 'myListPage'
        },
        showSelection: true,
        columns: [
          {
            label: '店铺',
            prop: 'storeId',
            width: 120,
            searchable: true,
            span: 24,
            type: ColumnType.SELECT,
            required: true,
            options: storeApi.options()
          },
          {
            label: '商品编码',
            prop: 'productCode',
            required: true,
            searchable: true
          },
          {
            label: '商品Id',
            searchable: true,
            prop: 'productId'
          }, {
            label: '换货类型',
            prop: 'offlineType',
            required: true,
            searchable: true,
            options: OfflineTypeEnum,
            type: ColumnType.SELECT
          },
          // {
          //   label: '上新日期',
          //   type: ColumnType.DATE,
          //   prop: 'newDate'
          // },
          // {
          //   label: '登记日期',
          //   type: ColumnType.DATE,
          //   searchOption: {
          //     options: {
          //       type: DateType.DATERANGE
          //     }
          //   },
          //   searchable: true,
          //   prop: 'registerDate'
          // },
          {
            label: '订单占有数量',
            prop: 'orderCount',
            required: true,
            type: ColumnType.NUMBER,
            width: 100
          }, {
            label: '备注',
            prop: 'notes',
            span: 24,
            required: false,
            type: ColumnType.TEXTAREA,
            width: 150
          },
          {
            label: '是否换货处理',
            type: ColumnType.RADIO,
            options: YesNoEnum,
            searchable: true,
            hiddenInForm: true,
            prop: 'handleFlag'
          }, {
            label: '换货处理人',
            type: ColumnType.SELECT,
            hiddenInForm: true,
            searchable: true,
            options: adminApi.listAll(),
            prop: 'handlerId'
          }, {
            label: '换货处理时间',
            hiddenInForm: true,
            type: ColumnType.DATETIME,
            prop: 'handleTime'
          }, {
            label: '是否换货跟进',
            type: ColumnType.RADIO,
            searchable: true,
            options: YesNoEnum,
            hiddenInForm: true,
            prop: 'exchangeFollowFlag'
          }, {
            label: '换货跟进人',
            type: ColumnType.SELECT,
            searchable: true,
            hiddenInForm: true,
            options: adminApi.listAll(),
            prop: 'exchangeFollowerId'
          }, {
            label: '换货跟进时间',
            hiddenInForm: true,
            type: ColumnType.DATETIME,
            prop: 'exchangeFollowTime'
          },
          // {
          //   label: '商品链接',
          //   width: 120,
          //   viewAsLink: true,
          //   span: 24,
          //   type: ColumnType.TEXTAREA,
          //   prop: 'tbLink'
          // },
          {
            label: '创建时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtCreate'
          },
          {
            label: '修改时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtModified'
          }
        ]
      }
    }
  },
  created() {
    this.startCount()
  },
  beforeDestroy() {
    if (this.timeFlag) {
      clearTimeout(this.timeFlag)
      this.timeFlag = null
    }
  },
  methods: {
    handleSubmitDistribution({ done }) {
      productOfflineRegisterApi.distribution(this.formData).then(() => {
        this.$success('分配成功')
        this.distributionDialogShowed = false
        this.$refs.table.reloadTable()
      }).finally(done)
    },
    handleBatchDistribution({ $service }) {
      if (!$service.hasSelectOne) {
        $service.error('请选择至少一条记录')
        return
      }
      this.formData.idList = $service.selectedIds
      this.distributionDialogShowed = true
    },
    startCount() {
      productOfflineRegisterApi.myCountInfo().then(data => {
        this.option.tab.options[1].num = data.notHandledCount
        this.option.tab.options[2].num = data.notExchangedCount
      })
      this.timeFlag = setTimeout(this.startCount, 3000)
    },
    handleImport() {
      this.importDialogShowed = true
    },
    handleImportSuccess() {
      this.importDialogShowed = false
      this.$refs.table.reloadTable()
    },
    handleExchangeFollow({ arg }) {
      this.$confirm('确定换货跟进了吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          productOfflineRegisterApi.exchangeFollow([arg.id]).then(() => {
            this.$notify({
              title: '成功',
              message: '操作成功',
              type: 'success',
              duration: 2000
            })
            this.$refs.table.reloadTable()
          })
        })
        .catch(() => {
        })
    },
    handleBatchExchangeFollow({ $service }) {
      if (!$service.hasSelectOne) {
        $service.error('请选择至少一条记录')
        return
      }
      this.$confirm('确定换货跟进了所选记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          productOfflineRegisterApi.exchangeFollow($service.selectedIds).then(() => {
            this.$notify({
              title: '成功',
              message: '操作成功',
              type: 'success',
              duration: 2000
            })
            this.$refs.table.reloadTable()
          })
        })
        .catch(() => {
        })
    },
    handleOfflineHandle({ arg }) {
      this.$confirm('确定换货处理了吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          productOfflineRegisterApi.offlineHandle([arg.id]).then(() => {
            this.$notify({
              title: '成功',
              message: '操作成功',
              type: 'success',
              duration: 2000
            })
            this.$refs.table.reloadTable()
          })
        })
        .catch(() => {
        })
    },
    handleBatchOfflineHandle({ $service }) {
      if (!$service.hasSelectOne) {
        $service.error('请选择至少一条记录')
        return
      }
      this.$confirm('确定换货处理了锁选记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          productOfflineRegisterApi.offlineHandle($service.selectedIds).then(() => {
            this.$notify({
              title: '成功',
              message: '操作成功',
              type: 'success',
              duration: 2000
            })
            this.$refs.table.reloadTable()
          })
        })
        .catch(() => {
        })
    }
  }
}
</script>

